<template>
  <el-dialog width="600px" v-model="show" title="设置视频封面" class="rounded-[15px]">
    <div class="flex flex-row">
      <span class="whitespace-nowrap inline-block justify-center flex flex-col mr-[10px] font-semibold">封面链接</span>
      <el-input v-model="customCover" placeholder="填写https://开头的图片地址，可以前往素材库复制图片链接"></el-input>
    </div>
    <div>
      <div class="mt-[20px]">
        <span class="font-semibold">生成封面</span>
      </div>
      <div class="flex flex-row gap-3 flex-wrap mt-20px">
        <div
          :class="[
            'w-[100px]',
            'h-[100px]',
            'bg-[#f0f0f0]',
            { 'border border-solid border-[2px] border-[#5fb878]': p === nowSelect }
          ]"
          v-for="(p, index) in coverList"
          @click="nowSelect = p"
          :key="index"
        >
          <el-image class="w-1/1 h-1/1" fit="scale-down" :src="p"></el-image>
        </div>
      </div>
    </div>
    <template #footer>
      <el-button type="primary" @click="confirm">确定</el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { File } from "@/components/UploadCool/interface/index";
import { ElMessage } from "element-plus";

const show = ref(false);

// 当前被选中的
const nowSelect = ref("");

// 自定义的视频链接
const customCover = ref("");

// 封面图列表
const coverList = ref<string[]>([]);

interface Props {
  row: File;
  api?: (params: any) => Promise<any>;
  refresh?: () => Promise<any>;
}

const props = ref<Props>();

const open = (params: Props) => {
  show.value = true;
  props.value = params;
  genCoverList(props.value?.row.origin_name);
};

const genCoverList = (url: string) => {
  const newList = [];
  for (let i = 0; i < 10; i++) {
    newList.push(url + `?x-oss-process=video/snapshot,t_${i * 4000},f_jpg,m_fast`);
  }
  coverList.value = newList;
};

const confirm = async () => {
  if (nowSelect.value === "" && customCover.value === "") return;
  try {
    const url = customCover.value !== "" ? customCover.value : nowSelect.value;
    await props.value?.api!({ url, id: props.value.row.id });
    ElMessage.success("设置成功");
    await props.value?.refresh!();
    show.value = false;
  } catch (error) {}
};
defineExpose({ open });
</script>

<style></style>
